<template>
  <div>
    <el-container>
      <el-header>
        <div class="firstSytle">
          <el-button size="mini" type="success" @click="initData" icon="el-icon-refresh">刷新</el-button>
          <el-button size="mini" type="primary" @click="add" icon="el-icon-circle-plus-outline">申请报修</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 1px;padding-top: 20px;height:100%">
        <div>
          <el-table :data="repairs" stripe v-loading="tableLoading" size="mini" style="width: 100%;">
            <el-table-column type="selection" width="30"></el-table-column>
            <el-table-column prop="listId" label="序号" width="60px"></el-table-column>
            <el-table-column prop="id" label="维修编号" width="140px"></el-table-column>
            <el-table-column prop="buildId" label="公寓编号" width="120px"></el-table-column>
            <el-table-column prop="roomId" label="宿舍号"></el-table-column>
            <el-table-column prop="description" label="报修描述" width="200px"></el-table-column>
            <el-table-column prop="flag" label="审核状态" width="120px"></el-table-column>
            <el-table-column prop="status" label="维修状态" width="120px"></el-table-column>
            <el-table-column prop="result" label="维修结果" width="120px"></el-table-column>
            <el-table-column prop="time" label="报修时间" width="180px"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120px" style="text-align: center"></el-table-column>
            <el-table-column label="操作" align="center" width="310px"> 
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="details(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteId(scope.row)"></el-button>
                <el-button type="primary" size="mini" @click="qualified(scope.row)" v-show="scope.row.btnShow1 && scope.row.btnShow">未解决</el-button>
                <el-button type="primary" size="mini" @click="unQualified(scope.row)"    v-show="scope.row.btnShow1 && scope.row.btnShow">已解决</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="lastLine" style="margin-top: 10px">               
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNum" :page-sizes="[10, 20,30,50,100,200,]"
                           :page-size="pageSize"
                           layout="sizes, prev, pager, next" :total="total">      
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>

    <el-dialog title="详情" :visible.sync="clickbutton" width="30%">
      <el-form :model="repair" label-width="100px">
        <!-- <el-form-item label="公寓编号: ">
          <el-select v-model="repair.buildId" style="width:100%;">
            <el-option v-for="item in selectSize" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="宿舍号: ">
          <el-select v-model="repair.roomId" style="width:100%;">
            <el-option v-for="item in selectSize" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="报修描述: ">
          <el-input v-model="repair.description"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button size="mini" type="primary" @click="clickbutton=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="update">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="申请报修" :visible.sync="clickAddButton" width="30%">
      <el-form :model="addRepair" label-width="100px" :rules="rules" ref="rulesForm">
        <el-form-item label="报修描述: " prop="description">
          <el-input v-model="addRepair.description"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button size="mini" type="primary" @click="clickAddButton=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addOneRepair('rulesForm')">提 交</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
    import {getRequest, postMethod, postRequest, putRequest} from "../../utils/api";

    export default {
        data() {
            return {
                repair: {
                    id: '',
                    buildId: '',
                    roomId: '',
                    description: '',
                },
                addRepair: {
                    buildId: '',
                    roomId: '',
                    description: '',
                },
                repairs: [],
                tableLoading: false,
                clickbutton: false,
                clickAddButton: false,
                pageNum: 1,
                pageSize: 10,
                total: 0,
                list: [],
                selectSize: [ //尺寸选择列表
                    {
                        label: '',
                        value: '',
                    }
                ],
                rules: {
                    buildId: [
                        {required: true, message: '请输入公寓编号', trigger: 'blur'}
                    ],
                    roomId: [
                        {required: true, message: '请输入房间号', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请输入报修描述', trigger: 'blur'}
                    ]
                },
            };
        },
        methods: {
            initData: function () {
                this.tableLoading = true;
                var tempdate
                this.getRequest("/repair/rep/apply/findList?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total;
                        this.repairs = resp.data.obj.data;
                        console.log(this.repairs)
                        for (var i = 0; i < this.repairs.length; i++) {
                            let b;
                            b = i + 1
                            this.repairs[i].listId = b
                            tempdate = this.repairs[i].time
                            this.repairs[i].time = tempdate.slice(0, tempdate.indexOf("."))
                            if(this.repairs[i].status==1 && this.repairs[i].flag==1 ){
                               this.repairs[i].btnShow1 = true;
                            }

                            switch (this.repairs[i].status) {
                                case 0:
                                    this.repairs[i].status = '待维修';
                                    break;
                                case 1:
                                    this.repairs[i].status = '已维修';
                                    break;
                            }
                            switch (this.repairs[i].flag) {
                                case 0:
                                    this.repairs[i].flag = '待审核';
                                    break;
                                case 1:
                                    this.repairs[i].flag = '已审核';
                                    break;
                            }
                            switch (this.repairs[i].result) {
                                case 0:
                                    this.repairs[i].result = '未解决';
                                    break;
                                case 1:
                                    this.repairs[i].result = '已解决';
                                    break;
                            }
                        }
                        this.clickAddButton = false;
                    }
                })
            },
            loadEmpty() {
                this.tableLoading = true;
                this.getRequest("/repair/rep/apply/findList?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total;
                        this.repairs = resp.data.obj.data;
                    }
                    this.clickAddButton = false;
                })
            },

            update(row) {//确认修改
                this.repair.status = '待维修' ? 0 : 1
                this.repair.flag = '待审核' ? 0 : 1
                this.repair.result = '未解决' ? 0 : 1
                this.tableLoading = true;
                postMethod("/repair/rep/apply/update", this.repair).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                        this.clickbutton = false;
                    } else {
                        Message.error({message: data.data.msg});
                    }
                })
                this.clickbutton = false;
            },

            deleteId(row) {
                var id = row.id;
                this.tableLoading = true;
                this.deleteRequest("/repair/rep/apply/delById/" + id).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    }
                })
            },
            unQualified(row) {
                this.tableLoading = true;
                postMethod("/repair/rep/apply/auditOk/" + row.id).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.repairs[index].btnShow = 0;
                        this.initData();
                        Message.success({message: data.data.msg});
                    } else {
                        this.initData();
                        Message.error({message: data.data.msg});
                    }
                })
            },


            qualified(row) {
                this.tableLoading = true;
                postMethod("/repair/rep/apply/auditError/" + row.id).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    } else {
                        this.initData();
                        Message.error({message: data.data.msg});
                    }
                })
            },
            addOneRepair(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        postMethod("/repair/rep/apply/add", this.addRepair).then(resp => {
                            this.tableLoading = true;
                            if (resp && resp.status == 200) {
                                this.clearForms();
                                this.initData();
                                Message.success({message: data.data.msg});
                            } else {
                                Message.error({message: data.data.msg});
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })

            },
            details(row) {   //详情
                this.repair = row;
                this.clickbutton = true
            },
            add() {
                this.clickAddButton = true;
            },
            clearForms() {
                this.addRepair = {
                    id: '',
                    buildId: '',
                    roomId: '',
                    description: '',
                }
            },


            handleSizeChange(val) {    //分页
                this.pageSize = val;
                this.initData()
            },
            handleCurrentChange(val) {   //分页
                this.pageNum = val;
                this.initData()
            },

        },
        mounted: function () {
            this.initData();
        },

    }
</script>

<style scoped>
  .firstSytle {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

  .inputStyle {
    width: 140px;
    margin-right: 5px;
  }

  .lastLine {
    display:  flex;
    flex-direction:  row;
    justify-content:  flex-end;
    margin:  10px 0 10px 0;
  }

  .el-row {
    margin: 10px 0;
  }

  .el-table {
    text-align: left;
    size: auto;
    width: 150px;
  }
</style>
